@import "../../_common/commonfunc"


.boxer
  background: #f5f5f5
  position: relative
  padding: 0
.hei-10-r
  height: 10rpx

.case-head
  padding: 10rpx 35rpx 0
  .item-pic image
    width: 68rpx
    height @width 
    border-radius: @width
  .item-desc
    color: $color-grey
  .item-title
    color: #000
    font-size: 60rpx
    font-weight: bold

.case-list
  margin-bottom: 40rpx
  // --vsb: hidden;
  &.active
    margin: 0
    .case-item:not(.active), .case-head
      transition: none;
      opacity 0

.case-item
  box-sizing: border-box
  visibility: var(--vsb)
  overflow: hidden
  // margin-bottom: 30rpx
  padding: 30rpx 0
  transition: all .3s cubic-bezier(0,.82,.77,1.42)
  position: relative
  z-index 1
  transform: scaleX(.9)
  border-radius: 26rpx
  // transform: scale(.9)
  
  // height: var(--case-item-height, auto)
  .item-wrap
    background: #fff;
    box-shadow: 0px 2rpx 22rpx 0px rgba(0,0,0,0.1)
    border-radius: 26rpx
    transition: all .6s ease-out
    height: 100%;
    overflow: hidden
  // .item-pic
  //   transform: scale(1.1)
  &.active
    padding: 0
    transform: translateY(var(--item-top, 0)) scale(1)
    z-index: 2
    height: 100vh
    background: #fff
    border-radius: 0
    .item-wrap
      transition: all .6s ease-in
      height: 100vh;
      width: 100vw
      border-radius: 0
    .item-pic
      border-radius: 0
      // transform: scale(1)
    .case-close
      opacity 1
    .item-head
      border-radius: 0
      background: #fff
    .item-body
      padding: 30rpx
      display: block
      visibility: initial;
    &.visibility
      .item-body
        visibility: visible
  .item-body
    visibility: hidden
    display: none
  .item-pic
    height: 860rpx
    width: 100%
    border-radius: 26rpx
  .item-desc
    font-size: 30rpx
    color: #737373
    margin-bottom: 5rpx
    image
      width: 100%
      margin: 20rpx 0
  .item-title
    color: #333
    font-size: 32rpx
    font-weight: bold
  // .item-head
  //   min-height: 80rpx
  //   padding: 10rpx 30rpx 
  //   box-sizing: border-box
  .item-footer
    display: none
  .item-footer-pic
    width: 220rpx
    height: @width
    border-radius: @width
    box-shadow: 0px 20rpx 30rpx 0px rgba(0,0,0,0.1)
    margin: auto
  .item-footer-title
    font-weight: bold
    font-size: 40rpx
    color: #000
    margin-bottom: 10rpx
    margin-top: 50rpx
  .item-footer-desc
    font-size: 24rpx
    color: #737373
  .item-btn
    border: 1rpx solid #D0D0D0
    box-shadow: 0px 4rpx 15rpx 0px rgba(0, 0, 0, 0.2)
    border-radius: 40rpx
    background: #fff
    width: 300rpx
    height: 80rpx
    font-size: 28rpx
    ss-display-flex(row nowrap, center, center)
    &:before
      content: '\e630'
      color: #2C8CDE
      font-size: 36rpx
      margin-right: 26rpx
    &.share
      &:before
        content: '\e620'
        color: #55A067

.case-close
  padding: 26rpx 30rpx
  position: fixed
  top: 40rpx
  left: 0
  color: #333
  z-index 999999999999
  opacity 0
  transition: opacity .3s
  &.active
    opacity: 1
  &.icon-close
    // ss-display-flex(row, center, center)
    width: 60rpx
    font-size: 50rpx

//分享
.input-item-content
  padding: 0


.item-head
  ss-display-flex(row nowrap, flex-start, center)
  padding: 30rpx
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  box-sizing: border-box
  // background: #fff
  border-radius: 0 0 26rpx 26rpx
  &.no-bg
    background: transparent
  .htitle
    font-size: 40rpx
    font-weight: bold
    color: #000
.item-logo
  width: 76rpx
  height: 76rpx
  margin-right: 12rpx
  image
    width: 100%
    height: 100%


.case-mask
  position: fixed
  top: 0
  left: 0;
  width: 100vw
  height: 100vh
  z-index: 999;


.pages-navbar
  margin-bottom: 30rpx